<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>部门测评详情 - IVT绩效考核系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
        }

        .back-btn {
            background: none;
            border: none;
            color: white;
            font-size: 18px;
            margin-right: 15px;
            cursor: pointer;
            padding: 5px;
        }

        .header h1 {
            font-size: 18px;
            font-weight: 600;
        }

        .container {
            padding: 20px;
        }

        .dept-info {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .dept-info h2 {
            font-size: 20px;
            color: #667eea;
            margin-bottom: 15px;
        }

        .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .info-item {
            display: flex;
            flex-direction: column;
        }

        .info-label {
            font-size: 12px;
            color: #999;
            margin-bottom: 5px;
        }

        .info-value {
            font-size: 14px;
            color: #333;
            font-weight: 500;
        }

        .total-score {
            grid-column: 1 / -1;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #f0f0f0;
            text-align: center;
        }

        .total-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }

        .total-value {
            font-size: 28px;
            font-weight: 600;
            color: #667eea;
        }

        .score-details {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .score-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
            color: #333;
        }

        .score-item {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f0f0f0;
        }

        .score-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }

        .score-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .indicator-name {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }

        .score-value {
            font-size: 16px;
            font-weight: 600;
            color: #667eea;
        }

        .indicator-content {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
        }

        .options {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
            margin-top: 15px;
        }

        .option {
            text-align: center;
            padding: 8px 6px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            transition: all 0.3s;
        }

        .option.selected {
            background: #1976d2;
            color: white;
            border-color: #1976d2;
        }

        .option-label {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 2px;
        }

        .option-score {
            font-size: 11px;
            opacity: 0.8;
        }

        .option.selected .option-score {
            opacity: 1;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .error-message {
            background: #fee;
            color: #c33;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
            display: none;
        }

        .error-message.show {
            display: block;
        }


    </style>
</head>
<body>
<div class="header">
    <button class="back-btn" onclick="goBack()">‹</button>
    <h1>部门测评详情</h1>
</div>

<div class="container">
    <div class="error-message" id="errorMessage"></div>

    <div class="loading" id="loading">
        正在加载测评详情...
    </div>

    <div class="dept-info" id="deptInfo" style="display: none;">
        <h2 id="deptName"></h2>
        <div class="info-grid">
            <!--div class="info-item">
                <div class="info-label">部门名称</div>
                <div class="info-value" id="deptNameValue"></div>
            </div-->
            <div class="info-item">
                <div class="info-label">测评时间</div>
                <div class="info-value" id="evaluationTime"></div>
            </div>
            <div class="info-item">
                <div class="info-label">测评状态</div>
                <div class="info-value" style="color: #52c41a;">已完成</div>
            </div>
            <div class="total-score">
                <div class="total-label">总分</div>
                <div class="total-value" id="totalScore">0</div>
            </div>
        </div>
    </div>

    <div class="score-details" id="scoreDetails" style="display: none;">
        <div class="score-title">评分详情</div>
        <div id="scoresList"></div>
    </div>
</div>

<script>
        let relationId = null;

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initPage();
        });

        function initPage() {
            // 从URL参数获取测评关系ID
            const urlParams = new URLSearchParams(window.location.search);
            relationId = urlParams.get('id');

            if (!relationId) {
                showError('参数错误，请重新选择');
                return;
            }

            loadEvaluationDetail();
        }

        function loadEvaluationDetail() {
            fetch(`/evaluation/api/h5/dept/evaluated/detail?relationId=${relationId}`)
                .then(response => response.json())
                .then(data => {
                    document.getElementById('loading').style.display = 'none';

                    if (data.success) {
                        renderEvaluationDetail(data.data);
                    } else {
                        showError(data.message || '加载测评详情失败');
                    }
                })
                .catch(error => {
                    document.getElementById('loading').style.display = 'none';
                    console.error('Error:', error);
                    showError('网络错误，请稍后重试');
                });
        }

        function renderEvaluationDetail(data) {
            const relation = data.relation;
            const points = data.points;

            // 渲染部门信息
            const deptName = relation.bcpbm || relation.BCPBM || '未知部门';
            document.getElementById('deptName').textContent = deptName;
            //document.getElementById('deptNameValue').textContent = deptName;
            document.getElementById('evaluationTime').textContent = formatDate(relation.cpsj || relation.CPSJ);
            document.getElementById('totalScore').textContent = relation.totalscore || relation.TOTALSCORE || 0;

            // 渲染分数详情
            const scoresList = document.getElementById('scoresList');
            scoresList.innerHTML = '';

            const scores = {
                '1': relation.firstscore || relation.FIRSTSCORE,
                '2': relation.twoscore || relation.TWOSCORE,
                '3': relation.threescore || relation.THREESCORE,
                '4': relation.fourscore || relation.FOURSCORE
            };

            points.forEach(point => {
                const score = scores[point.khdbh || point.KHDBH] || 0;
                
                // 获取各选项分数，兼容大小写
                const optionA = point.a || point.A || 0;
                const optionB = point.b || point.B || 0;
                const optionC = point.c || point.C || 0;
                const optionD = point.d || point.D || 0;
                const optionE = point.e || point.E || 0;
                
                // 确定选择的选项
                let selectedOption = '';
                if (score === optionA) {
                    selectedOption = 'A';
                } else if (score === optionB) {
                    selectedOption = 'B';
                } else if (score === optionC) {
                    selectedOption = 'C';
                } else if (score === optionD) {
                    selectedOption = 'D';
                } else if (score === optionE) {
                    selectedOption = 'E';
                }

                // 格式化考核点详解，根据句号进行换行
                const formattedContent = formatDescription(point.khdnr || point.KHDNR || point.khdxj || point.KHDXJ || '暂无详细说明');

                const scoreItem = document.createElement('div');
                scoreItem.className = 'score-item';

                scoreItem.innerHTML = `
                    <div class="score-header">
                        <div class="indicator-name">${point.khdmc || point.KHDMC || '未知指标'}</div>
                    </div>
                    <div class="indicator-content">${formattedContent}</div>
                    <div class="options">
                        <div class="option ${selectedOption === 'A' ? 'selected' : ''}">
                            <div class="option-label">A</div>
                            <div class="option-score">${optionA}分</div>
                        </div>
                        <div class="option ${selectedOption === 'B' ? 'selected' : ''}">
                            <div class="option-label">B</div>
                            <div class="option-score">${optionB}分</div>
                        </div>
                        <div class="option ${selectedOption === 'C' ? 'selected' : ''}">
                            <div class="option-label">C</div>
                            <div class="option-score">${optionC}分</div>
                        </div>
                        <div class="option ${selectedOption === 'D' ? 'selected' : ''}">
                            <div class="option-label">D</div>
                            <div class="option-score">${optionD}分</div>
                        </div>
                        <div class="option ${selectedOption === 'E' ? 'selected' : ''}">
                            <div class="option-label">E</div>
                            <div class="option-score">${optionE}分</div>
                        </div>
                    </div>
                `;

                scoresList.appendChild(scoreItem);
            });

            // 显示内容
            document.getElementById('deptInfo').style.display = 'block';
            document.getElementById('scoreDetails').style.display = 'block';
        }

        function formatDate(dateString) {
            if (!dateString) return '-';

            const date = new Date(dateString);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');

            return `${year}-${month}-${day} ${hours}:${minutes}`;
        }

        function showError(message) {
            const errorDiv = document.getElementById('errorMessage');
            errorDiv.textContent = message;
            errorDiv.classList.add('show');
        }

        // 格式化考核点详解
        function formatDescription(desc) {
            return desc.replace(/。/g, '。<br>').trim();
        }

        function goBack() {
            window.history.back();
        }


</script>
</body>
</html>
